<template>
	<page-meta :page-style="themeColor"></page-meta>
	<scroll-view scroll-y="true" class="container">
		<!-- <view class="iconfont icon-close back-btn" @click="$util.goBack()"></view> -->
		<view class="header-wrap">
			<view class="title">注册</view>
			<view class="regisiter-agreement">
				<text class="color-tip">已有账号,</text>
				<text class="color-base-text" @click="toLogin">立即登录</text>
			</view>
		</view>
		<view class="body-wrap">
			<view class="form-wrap">
				<view class="input-wrap" v-show="registerMode == 'mobile'">
					<view class="content">
						<view class="area-code">+86</view>
						<input type="number" placeholder="仅限中国大陆手机号注册" placeholder-class="input-placeholder" class="input" maxlength="11" v-model="formData.mobile" />
					</view>
				</view>
				<view class="input-wrap" v-show="registerMode == 'account'">
					<view class="content"><input type="text" placeholder="请输入账号" placeholder-class="input-placeholder" class="input" v-model="formData.account" /></view>
				</view>
				<view class="input-wrap" v-show="registerMode == 'account'">
					<view class="content"><input type="password" placeholder="请输入密码" placeholder-class="input-placeholder" class="input" v-model="formData.password" /></view>
				</view>
				<view class="input-wrap" v-show="registerMode == 'account'">
					<view class="content">
						<input type="password" placeholder="请确认密码" placeholder-class="input-placeholder" class="input" v-model="formData.rePassword" />
					</view>
				</view>
				<view class="input-wrap">
					<view class="content">
						<input type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" class="input" v-model="formData.vercode" />
						<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
					</view>
				</view>
				<view class="input-wrap" v-show="registerMode == 'mobile'">
					<view class="content">
						<input type="text" placeholder="请输入动态码" placeholder-class="input-placeholder" class="input" v-model="formData.dynacode" />
						<view class="dynacode" :class="dynacodeData.seconds == 120 ? 'color-base-text' : 'color-tip'" @click="sendMobileCode">{{ dynacodeData.codeText }}</view>
					</view>
				</view>
			</view>
			<view class="login-mode-box">
				<text @click="switchRegisterMode" v-show="registerMode == 'mobile' && registerConfig.register.indexOf('username') != -1">使用用户名注册</text>
				<text @click="switchRegisterMode" v-show="registerMode == 'account' && registerConfig.register.indexOf('mobile') != -1">使用手机号注册</text>
			</view>
			<view class="btn_view"><button type="primary" @click="register" class="login-btn color-base-border color-base-bg">注册</button></view>
			<view class="regisiter-agreement" style="display: flex;flex-wrap: wrap;align-items: center;">
				<view :class="['iconfont',agree ?'icon-fuxuankuang1': 'icon-fuxuankuang2']" style="font-size: 24rpx;color: #999;padding-right: 4rpx;" @click="agreeClick"></view>
				 若手机好未注册将进入注册流程，注册即为同意
				<text class="color-base-text" @click="openPopup(2)">《用户服务协议》</text>
				<text class="color-base-text" @click="openPopup(1)">《隐私政策》</text>
			</view>
		</view>

		<view @touchmove.prevent>
			<uni-popup ref="registerPopup" type="center" :maskClick="false">
				<view class="conten-box">
					<view class="close"><text class="iconfont icon-close" @click="toClose(1)"></text></view>
					<!-- <view class="title">{{ regisiterAgreement.title }}</view> -->
					<view class="title">隐私政策</view>
					<view class="con">
						<scroll-view scroll-y="true" class="con"><rich-text :nodes="regisiterAgreement.content"></rich-text></scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		<view @touchmove.prevent>
			<uni-popup ref="registerPopup1" type="center" :maskClick="false">
				<view class="conten-box">
					<view class="close"><text class="iconfont icon-close" @click="toClose(2)"></text></view>
					<view class="title">用户服务协议</view>
					<view class="con">
						<scroll-view scroll-y="true" class="con">
							“九钻通信”平台是一款通过互联网为定制宽带安装提供服务，助推分享经济的发展。
							第一条 提示条款
							1.1 深圳市玖钻通信科技有限公司（以下简称“我司”）在此特别提醒：在注册成为用户前，请认真阅读本《用户服务协议》（以下简称“本协议”），确保充分理解本协议中各条款。请审慎阅读并选择接受或不接受本协议（特别是免除或者限制责任的条款、法律适用和争议解决内容）。除非接受本协议中所有条款，否则无权注册、登陆或使用本协议所述服务。注册、登陆、使用等行为将视为对本协议的接受，成为九钻通信的用户，并同意接受本协议各项条款的约束。
							1.2 本协议可由我司随时更新，更新后的协议条款一旦公布即替代原来的协议条款，恕不再另行通知，用户可在本网站随时查阅最新版协议条款。用户若不接受修改后条款，请立即停止使用九钻通信平台提供的服务，用户继续使用将被视为接受修改后的协议，并秉着诚信原则遵守协议条款。
							第二条 定义
							2.1 深圳市玖钻通信科技有限公司：提供安装平台，服务人民为宗旨。
							2.4 用户：指与我司签订《用户服务协议》并完成注册流程，具有完全民事行为能力的玖钻通信平台各项服务的使用者，包括自然人、企事业单位、社会团体（若您是代表法人实体签订本协议，您应获得授权并遵守本协议，您的法人实体应受本协议的约束）。
							第三条 用户注册
							3.1 注册要求：用户注册是指用户使用玖钻通信，按要求填写相关信息并确认同意履行相关用户协议的过程。
							3.2 注册流程①按要求输入电话号码，根据提示输入验证码②可以选择绑定微信账号。③选择创建用户昵称以及设置登录密码④注册成功
							3.3 说明①由于用户的账户关联认证用户的信用信息，您不得转让该账户，也不得许可或协助他人使用您的认证用户、账户享受玖钻通信服务，否则由此产生的一切责任均由您承担责任，我司将不承担任何法律责任。②在用户认证过程中，您应按照玖钻通信平台页面的提示，准确、真实、完整地提供您的信息。您了解并同意，您有义务保证您提供信息的真实性和有效性。③如果您的认证信息有所变更，应及时更新您提供的信息，我司将依法不时地对您的信息进行检查核实、您应当配合提供最及时、真实、完整的信息。④如果我司按照您最后一次提供的信息与您联系未果、您未按我司的要求提供信息、您提供的信息存在明显不实的，将自己承担因此对您自身、他人及我司造成的全部损失和不利后果。
							第四条 服务内容
							4.1 基本服务：“玖钻通信”平台以深圳为中心辐射粤港澳大湾区，定制宽带线路。我们秉承“满足更多人出行需求”的品牌理念，坚持“优,好，美”的口号，致力于提供更优质的服务。
							4.2 升级服务：玖钻通信平台在顺应服务行业发展潮流下，以线上线下相结合的全新行业模式迅速在全省崛起，利用互联网信息技术提供优质的服务，提供便捷支付，服务于市民个性化需求。
							第五条 隐私保护
							5.1 本隐私声明仅适用于通过使用本平台个人信息。您同意并确定，在您访问和使用平台客户端、指定网站和服务的同时，您的个人信息可能会被我司收集、保存。
							5.2 本网站不对外公开或向第三方公布单个用户的注册资料及用户在使用网络服务时存储在本网站的非公开内容，但下列情况除外：①事先获得用户的明确授权；②根据有关的法律法规要求；③按照相关政府主管部门的要求；④为维护社会公众的利益等。
							5.3 本平台可能会与第三方合作向用户提供相关的网络服务等，在此情况下，如该第三方同意承担与本平台等同的保护用户隐私的责任，则本平台有权将用户的注册资料等提供给该第三方。
							5.4 您的账户由您自行设置并由您保管，我司任何时候不会主动要求您提供您的账户信息。因此，请务必保管好您的账户，账户安全由您自行负责，请确保您在每个上网时段结束时退出登录并以正确步骤离开玖钻通信平台。如果您的账户因您主动泄露或遭受他人攻击、诈骗等行为而造成的任何损失及后果，该等损失和后果均由您自行承担。
							5.5 为了玖钻通信平台提供相应服务之必须，您以自愿填写的方式提供注册所需的姓名、性别、电话等类似的个人信息，则表示您已经了解并接受您个人信息的用途，同意玖钻通信平台为实现该特定目的的使用您的个人信息。除此个人信息之外，其他任何您发送或提供给玖钻通信平台的材料、信息、文本（以下统称信息）均将被视为非保密和非转有的。我司对这些信息不承担任何义务。同时如果您提交时没有特别声明的，可视为同意搭对出行及授权人可以因商业或非商业的目的复制、透露、分发、合并和以其他方式利用这些信息和所有数据、图像、声音、文本及其他内容。
							第六条 使用规则
							6.1 付款及支付方式：您知晓并同意认可本平台现行公示或未来更新的有关服务价格标准，您可在本平台查看有关服务的价格，这些价格可能随时更新，您必须自行留意服务价格。您在享受服务时应自觉按照平台提示及时支付相关费用，目前平台支持微信支付账户和支付宝支付账户支付。
							6.2 发票：在您完成下单完成之后，您可以在用户端自主申请开具电子发票，此时您需要提供开具发票所需的相关信息（包括但不限于公司名称、纳税人识别号、电子邮箱、邮寄地址等信息），申请成功后，客服人员会为您完成开票手续。

						</scroll-view>
					</view>
				</view>
			</uni-popup>
		</view>

		<loading-cover ref="loadingCover"></loading-cover>
		<register-reward ref="registerReward"></register-reward>
	</scroll-view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import validate from 'common/js/validate.js';
import registerReward from '@/components/register-reward/register-reward.vue';

export default {
	components: {
		uniPopup,
		registerReward
	},
	data() {
		return {
			allowRegister: true, // 是否允许注册
			registerMode: 'account',
			formData: {
				mobile: '',
				account: '',
				password: '',
				rePassword: '',
				vercode: '',
				dynacode: '',
				key: ''
			},
			regisiterAgreement: {
				// 注册协议
				title: '',
				content: ''
			},
			
			captcha: {
				// 验证码
				id: '',
				img: ''
			},
			isSub: false,
			back: '', // 返回页
			dynacodeData: {
				seconds: 120,
				timer: null,
				codeText: '获取动态码',
				isSend: false
			},
			registerConfig: {
				register: ''
			},
			authInfo: null,
			agree: false
		};
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		this.getCaptcha();
		this.getRegisiterAggrement();
		this.getRegisterConfig();
		this.authInfo = uni.getStorageSync('authInfo');
	},
	onShow() {
		
	},
	onReady() {
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
	},
	methods: {
		/**
		 * 切换注册方式
		 */
		switchRegisterMode() {
			this.registerMode = this.registerMode == 'mobile' ? 'account' : 'mobile';
		},
		/**
		 * 展示注册协议
		 */
		openPopup(t) {
			if(t == 1) {
				this.$refs.registerPopup.open();
			} else {
				this.$refs.registerPopup1.open();
			}
			
		},
		/**
		 * 点击关闭协议
		 */
		toClose(t) {
			if(t == 1) {
				this.$refs.registerPopup.close();
			}else {
				this.$refs.registerPopup1.close();
			}
			
		},
		/**
		 * 获取注册协议
		 */
		getRegisiterAggrement() {
			this.$api.sendRequest({
				url: '/api/register/aggrement',
				success: res => {
					if (res.code >= 0) {
						this.regisiterAgreement = res.data;
					}
				}
			});
		},
		/**
		 * 获取注册配置
		 */
		getRegisterConfig() {
			this.$api.sendRequest({
				url: '/api/register/config',
				success: res => {
					if (res.code >= 0) {
						this.registerConfig = res.data.value;
						if (this.registerConfig.register == '') {
							this.$util.showToast({ title: '平台未启用注册!' });
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index');
							}, 1000);
						} else if (this.registerConfig.register.indexOf('username') != -1) {
							this.registerMode = 'account';
						} else {
							this.registerMode = 'mobile';
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				}
			});
		},
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			this.$api.sendRequest({
				url: '/api/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
					}
				}
			});
		},
		agreeClick() {
			console.log("---===")
			this.agree = !this.agree
		},
		
		/**
		 * 注册
		 */
		register() {
			if(!this.agree) {
				return this.$util.showToast({
					title: '请先阅读并同意'
				});
			}
			
			
			if (this.registerMode == 'account') {
				var url = '/api/register/username';
				data = {
					username: this.formData.account,
					password: this.formData.password
				};
			} else {
				var url = '/api/register/mobile',
					data = {
						mobile: this.formData.mobile,
						key: this.formData.key,
						code: this.formData.dynacode
					};
			}
			if (this.captcha.id != '') {
				data.captcha_id = this.captcha.id;
				data.captcha_code = this.formData.vercode;
			}
			if (this.authInfo) {
				Object.assign(data, this.authInfo);
				if (this.authInfo.nickName) data.nickname = this.authInfo.nickName;
				if (this.authInfo.avatarUrl) data.headimg = this.authInfo.avatarUrl;
			}
			if (uni.getStorageSync('source_member')) data.source_member = uni.getStorageSync('source_member');

			if (this.verify(data)) {
				if (this.isSub) return;
				this.isSub = true;
				this.$api.sendRequest({
					url,
					data,
					success: res => {
						if (res.code >= 0) {
							uni.setStorage({
								key: 'token',
								data: res.data.token,
								success: () => {
									if (this.$refs.registerReward.getReward()) {
										this.$util.showToast({
											title: '注册成功'
										});

										this.$refs.registerReward.open(this.back);
									} else {
										if (this.back != '') {
											this.$util.redirectTo(decodeURIComponent(this.back), {}, 'reLaunch');
										} else {
											this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
										}
									}
								}
							});
						} else {
							this.isSub = false;
							this.getCaptcha();
							this.$util.showToast({
								title: res.message
							});
						}
					},
					fail: res => {
						this.isSub = false;
						this.getCaptcha();
					}
				});
			}
		},
		verify(data) {
			// 手机号注册
			var user_test = /^[A-Za-z0-9]+$/;
			if (this.registerMode == 'mobile') {
				var rule = [{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' }, { name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }];
				if (this.captcha.id != '') rule.push({ name: 'captcha_code', checkType: 'required', errorMsg: this.$lang('captchaPlaceholder') });
				rule.push({ name: 'code', checkType: 'required', errorMsg: this.$lang('dynacodePlaceholder') });
			}
			// 用户名注册
			if (this.registerMode == 'account') {
				var rule = [{ name: 'username', checkType: 'required', errorMsg: '请输入账号' }, { name: 'password', checkType: 'required', errorMsg: '请输入密码' }],
					regConfig = this.registerConfig;

				if (!user_test.test(data.username)) {
					this.$util.showToast({
						title: '用户名只能输入数字跟英文'
					});
					return;
				}

				if (regConfig.pwd_len > 0) {
					rule.push({
						name: 'password',
						checkType: 'lengthMin',
						checkRule: regConfig.pwd_len,
						errorMsg: '密码长度不能小于' + regConfig.pwd_len + '位'
					});
				}
				if (regConfig.pwd_complexity != '') {
					let passwordErrorMsg = '密码需包含',
						reg = '';
					if (regConfig.pwd_complexity.indexOf('number') != -1) {
						reg += '(?=.*?[0-9])';
						passwordErrorMsg += '数字';
					}
					if (regConfig.pwd_complexity.indexOf('letter') != -1) {
						reg += '(?=.*?[a-z])';
						passwordErrorMsg += '、小写字母';
					}
					if (regConfig.pwd_complexity.indexOf('upper_case') != -1) {
						reg += '(?=.*?[A-Z])';
						passwordErrorMsg += '、大写字母';
					}
					if (regConfig.pwd_complexity.indexOf('symbol') != -1) {
						reg += '(?=.*?[#?!@$%^&*-])';
						passwordErrorMsg += '、特殊字符';
					}
					rule.push({
						name: 'password',
						checkType: 'reg',
						checkRule: reg,
						errorMsg: passwordErrorMsg
					});
				}
				if (this.formData.password != this.formData.rePassword) {
					this.$util.showToast({
						title: '两次密码不一致'
					});
					return false;
				}
				if (this.captcha.id != '') rule.push({ name: 'captcha_code', checkType: 'required', errorMsg: this.$lang('captchaPlaceholder') });
			}
			var checkRes = validate.check(data, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({
					title: validate.error
				});
				return false;
			}
		},
		/**
		 * 去登录
		 */
		toLogin() {
			if (this.back) this.$util.redirectTo('/pages_tool/login/login', { back: encodeURIComponent(this.back) });
			else this.$util.redirectTo('/pages_tool/login/login');
		},
		/**
		 * 发送手机动态码
		 */
		sendMobileCode() {
			if (this.dynacodeData.seconds != 120 || this.dynacodeData.isSend) return;
			var data = {
				mobile: this.formData.mobile,
				captcha_id: this.captcha.id,
				captcha_code: this.formData.vercode
			};
			var rule = [
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
				{ name: 'captcha_code', checkType: 'required', errorMsg: '请输入验证码' }
			];
			var checkRes = validate.check(data, rule);
			if (!checkRes) {
				this.$util.showToast({ title: validate.error });
				return;
			}
			this.dynacodeData.isSend = true;

			this.dynacodeData.timer = setInterval(() => {
				this.dynacodeData.seconds--;
				this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
			}, 1000);

			this.$api.sendRequest({
				url: '/api/register/mobileCode',
				data: data,
				success: res => {
					if (res.code >= 0) {
						this.formData.key = res.data.key;
					} else {
						this.$util.showToast({ title: res.message });
						this.refreshDynacodeData();
					}
				},
				fail: () => {
					this.$util.showToast({ title: 'request:fail' });
					this.refreshDynacodeData();
				}
			});
		},
		refreshDynacodeData(){
			this.getCaptcha();
			clearInterval(this.dynacodeData.timer);
			this.dynacodeData = {
				seconds: 120,
				timer: null,
				codeText: '获取动态码',
				isSend: false
			};
		}
	},
	watch: {
		'dynacodeData.seconds': {
			handler(newValue, oldValue) {
				if (newValue == 0) {
					this.refreshDynacodeData();
				}
			},
			immediate: true,
			deep: true
		}
	}
};
</script>

<style lang="scss">
@import './public/css/common.scss';
</style>
<style scoped lang="scss">
.conten-box {
	padding: 0 30rpx 30rpx;
	.title {
		text-align: center;
		margin-top: 50rpx;
		margin-bottom: 10rpx;
	}
	.close {
		position: absolute;
		right: 30rpx;
		top: 10rpx;
	}
	.con {
		height: 500rpx;
	}
}
/deep/ .reward-popup .uni-popup__wrapper-box {
	background: none !important;
	max-width: unset !important;
	max-height: unset !important;
	overflow: unset !important;
}
</style>
